---
title: 'React component'
description: 'Learn how to use the Schedule-X calendar in a React application'
---

import ReactIcon from "../../../../components/partials/logos/react-icon";

# <ReactIcon /> React component

This page offers documentation for using the Schedule-X calendar in React. For general documentation on
configuring and interacting with the calendar, refer to the rest of the calendar documentation.

## Installing

In this example we will set up a calendar with the default theme, and a plugin for retrieving and updating events.

import { Tabs } from 'nextra/components'

<Tabs items={['npm', 'pnpm', 'yarn']}>
  <Tabs.Tab>
    ```bash copy
      npm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service temporal-polyfill
    ```
  </Tabs.Tab>

  <Tabs.Tab>
    ```bash copy
      pnpm install @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill
    ```
  </Tabs.Tab>

  <Tabs.Tab>
    ```bash copy
      yarn add @schedule-x/react @schedule-x/calendar @schedule-x/theme-default @schedule-x/events-service @preact/signals preact temporal-polyfill
    ```
  </Tabs.Tab>
</Tabs>

import {Callout} from "nextra/components";

<Callout type="info">
  Curious about the `temporal-polyfill` package? Read more [here](/docs/calendar/temporal).
</Callout>


## Basic usage

### Example

import ReactExample from '../../../../components/code-examples/react-calendar.mdx'
import NextjsExample from '../../../../components/code-examples/nextjs-calendar.mdx'

<Tabs items={['React', 'Next']}>
  <Tabs.Tab>
    <ReactExample />
  </Tabs.Tab>
  <Tabs.Tab>
    <Callout type="info">
      Depending on your build tools, you might need to target
      the ESM file from `@schedule-x/react` explicitly:

      ```js copy
      import { ScheduleXCalendar, useNextCalendarApp } from '@schedule-x/react/dist/index'
      ```

    </Callout>
    <NextjsExample />
  </Tabs.Tab>
</Tabs>

## Styles

The Schedule-X calendar is a responsive component. To achieve this,
it cannot be delivered with a fixed height or width of its own. You need to define the height and width of the
wrapping element `.sx-react-calendar-wrapper` according to your needs. For a regular desktop application, something
like this might do the trick for you:

```css
.sx-react-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}
```

## Custom components

The Schedule-X calendar is built with customization in mind. Currently, you can use the following custom
components to take control over certain parts of the calendar. This is done by writing your own React components:

| Slot / Component name       | Description                                                         | Props                           |
|-----------------------------|---------------------------------------------------------------------|---------------------------------|
| `timeGridEvent`             | The component for timed events used in the week- and day views      | `calendarEvent`                 |
| `dateGridEvent`             | The component for all-day events used in the week- and day views    | `calendarEvent`                 |
| `weekGridDate`              | Replaces the day name and date in the header of day- and week views | `date`                          |
| `weekGridHour`              | Replaces the hour in the time axis of day- and week views           | `hour`, `gridStep`              |
| `monthGridEvent`            | The component for events used in the month grid view                | `calendarEvent`, `hasStartDate` |
| `monthGridDayName`          | Replaces day names like "Mon", "Tue" in month grid                  | `day` (0-6, like in JS-dates)   |
| `monthGridDate`             | Replaces date of month in month grid                                | `date`, `jsDate`                |
| `monthAgendaEvent`          | The component for events used in the month agenda view              | `calendarEvent`                 |
| `eventModal`                | The component for the modal that opens when clicking an event       | `calendarEvent`                 |
| `headerContentLeftPrepend`  | Prepends content to the left part of the header                     | `$app`                          |
| `headerContentLeftAppend`   | Appends content to the left part of the header                      | `$app`                          |
| `headerContentRightPrepend` | Prepends content to the right part of the header                    | `$app`                          |
| `headerContentRightAppend`  | Appends content to the right part of the header                     | `$app`                          |
| `headerContent`             | Replaces the whole header content                                   | `$app`                          |
| `sidebarAddEventButton`     | "Add event" button in the sidebar plugin                            | `onClick`                       |
| `resourceEvent`             | Event element in resource scheduler                                 | `calendarEvent`, `resource`     |

An example of how to use these components can be found here: https://github.com/schedule-x/react-example/blob/main/src/App.tsx

[Visual overview of all components](/docs/calendar/custom-components)

## More examples

A repo with more examples can be found here:

https://github.com/schedule-x/react-examples
